<template>
  <div ref="htmlrender" class="html-render"></div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  name: "HTMLRender",
  props: {
    value: {
      type: String,
      required: false,
      default: ""
    }
  },
  data() {
    return {
      Quill: undefined,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        modules: {},
        readOnly: true
      }
    };
  },
  watch: {
    value: {
      handler(val) {
        if (this.Quill) {
          this.Quill.pasteHTML(val);
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.init();
    const dom = document.querySelector(".ql-toolbar");
    dom && dom.remove();
  },
  methods: {
    init() {
      const htmlrender = this.$refs.htmlrender;
      // 初始化编辑器
      this.Quill = new Quill(htmlrender, this.options);
      // 默认值
      this.Quill.pasteHTML(this.currentValue);
    }
  }
};
</script>

<style lang="scss" scoped>
.article-detail {
  /deep/.ql-formats {
    display: none;
  }
}
</style>
